웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
제이쿼리(jQuery)에서 선택한 엘리먼트를 서서히 사라지거나 나타나게 할 수 있는 방법에 대하여 알아봅니다. 이때 많이 사용되는 방법이 바로 fadeIn() 그리고 fadeOut() 메소드 두 개입니다.
# 제이쿼리 엘리먼트 사라지는 효과 구현, fadeIn(), fadeOut()
제이쿼리는 애니메이션 및 효과와 관련된 메소드를 제공합니다. 이때 사라지거나 나타나는 애니메이션 효과를 구현할 수 있도록 fadeIn() 그리고 fadeOut() 메소드를 사용할 수 있습니다. fadeIn()과 fadeOut()은 사전적 의미처럼 서서히 사라지거나 나타날 수 있는 효과를 구현하게 도와줍니다. 사용방법은 매우 간단합니다.fadeIn(지속기간, 콜백함수);
fadeOut(지속기간, 타이밍 함수 타입, 콜백함수);
위 메소드는 모두 투명도(opacity속성)를 조절하여 애니메이션을 만들어냅니다. 사용 가능한 옵션은 모두 선택 옵션 사항입니다. 자세히 알아보면 아래와 같습니다.
- 지속시간(duration) : 애니메이션이 얼마나 지속될 지 시간을 설정
- 애니메이션 타이밍 함수 : 애니메이션을 어떻게 보여줄 지 타이밍 함수 타입
- 콜백함수 : 애니메이션이 끝나고 호출할 함수
가장 간단한 방법은 아래처럼 아무 옵션 없이 사용하는 방법입니다. 이때 속도는 기본값으로 지정됩니다.
$('element').fadeIn();
// 엘리먼트가 서서히 나타남
$('element').fadeOut();
// 엘리먼트가 서서히 사라짐
// 엘리먼트가 서서히 나타남
$('element').fadeOut();
// 엘리먼트가 서서히 사라짐
매우 간단하게 사라지는 효과를 구현했습니다.
! 애니메이션 속도 조절하기
만약 애니메이션 속도를 조절할 경우 더 천천히 또는 더 빠르게 사라지거나 나타나게 할 수 있습니다. 방법은 간단합니다. 다음 메개변수로 속도를 넘겨주면 됩니다.$('element').fadeIn(1000);
으로 이제 위 엘리먼트는 1000ms인 1초 뒤에 나타나게 되었습니다. 마지막콜백함수를 호출하는 방법입니다.
! 애니메이션이 끝나고 콜백함수 호출하기
다음으로 애니메이션이 끝나고 특정 함수를 호출하는 방법입니다. 이 방법은 애니메이션이 언제 끝날 지 생각하지 않고 바로 콜백을 실행시키므로 매우 편리합니다. 만약 애니메이션 후 alert()을 띄우려면 아래와 같습니다.$('element').fadeIn(1000, function() {
alert();
});
alert();
});
그럼 아래에서 예제를 만들어보고 어떻게 동작하는지 알아보겠습니다.
! fadeIn() 및 fadeOut() 예제소스 보기
그렇다면 위 메소드가 어떻게 동작하는지 버튼을 만들고 구현해 보도록 하겠습니다. 아래 예제를 봐주세요.
@ fade.html
<div id="test">
Test Element
</div>
<button id="fadeOutBt">FadeOut</button>
<button id="fadeInBt">Fadeln</button>
Test Element
</div>
<button id="fadeOutBt">FadeOut</button>
<button id="fadeInBt">Fadeln</button>
예제는 간단합니다. 버튼을 클릭하면 Test Element라는 요소가 사라지거나 나타나는 간단한 예제입니다.
@ fade.css
#test {
width:100px;
height: 100px;
background: #eee;
}
width:100px;
height: 100px;
background: #eee;
}
회색의 네모난 박스 형태의 레이어입니다. 다음으로 버튼을 클릭하면 호출되도록 스크립트를 작성합니다.
testEle = $('#test');
$('#fadeOutBt').click(function(){
testEle.fadeOut();
});
$('#fadeInBt').click(function(){
testEle.fadeIn();
});
$('#fadeOutBt').click(function(){
testEle.fadeOut();
});
$('#fadeInBt').click(function(){
testEle.fadeIn();
});
여기까지 모든 코드가 완료되었습니다.
# 예제 직접 동작해보기
위의 fadeIn(), fadeOut() 예제를 웹페이지에 나타나면 아래와 같이 나타날 것입니다. 버튼을 클릭해보세요.<div id="test">
Test Element
</div>
<button id="fadeOutBt">FadeOut</button>
<button id="fadeInBt">Fadeln</button>
<style>
#test {
width:100px;
height: 100px;
background: #eee;
}
</style>
<script>
testEle = $('#test');
$('#fadeOutBt').click(function(){
testEle.fadeOut();
});
$('#fadeInBt').click(function(){
testEle.fadeIn();
});
</script>
Test Element
</div>
<button id="fadeOutBt">FadeOut</button>
<button id="fadeInBt">Fadeln</button>
<style>
#test {
width:100px;
height: 100px;
background: #eee;
}
</style>
<script>
testEle = $('#test');
$('#fadeOutBt').click(function(){
testEle.fadeOut();
});
$('#fadeInBt').click(function(){
testEle.fadeIn();
});
</script>
엘리먼트가 사라지고 나타나는지 확인해보세요. 여기까지 fadeOut(), fadeIn() 메소드를 알아보았습니다.
아래의 글도 찾고 계시지 않나요?